<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑战队</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .input-group {
            position: relative;
            margin-bottom: 1.5rem;
        }
        .input-group input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            font-size: 1rem;
            line-height: 1.5;
            transition: all 0.3s;
            background-color: #f9fafb;
        }
        .input-group input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
            background-color: white;
        }
        .input-group label {
            position: absolute;
            left: 1rem;
            top: 0.75rem;
            color: #6b7280;
            transition: all 0.3s;
            pointer-events: none;
        }
        .input-group input:focus + label,
        .input-group input:not(:placeholder-shown) + label {
            top: -0.5rem;
            left: 0.75rem;
            font-size: 0.75rem;
            padding: 0 0.25rem;
            background-color: white;
            color: #3b82f6;
        }
        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.3s;
        }
        .btn-primary {
            background-color: #3b82f6;
            color: white;
        }
        .btn-primary:hover {
            background-color: #2563eb;
        }
        .btn-secondary {
            background-color: white;
            border: 1px solid #e5e7eb;
            color: #4b5563;
        }
        .btn-secondary:hover {
            background-color: #f9fafb;
        }
        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        .file-input-wrapper input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: pointer;
            display: block;
        }
        .image-preview {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e5e7eb;
            transition: all 0.3s;
        }
        .upload-btn-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
            margin-top: 1rem;
        }
        .upload-btn {
            border: 2px solid #3b82f6;
            color: #3b82f6;
            background-color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.3s;
        }
        .upload-btn:hover {
            background-color: #f0f7ff;
        }
        .upload-btn-wrapper input[type=file] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="max-w-md mx-auto h-screen flex flex-col">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm">
            <div class="px-4 py-6">
                <div class="flex items-center">
                    <button onclick="goBack()" class="mr-4 text-gray-400">
                        <i class="fas fa-arrow-left text-xl"></i>
                    </button>
                    <h1 class="text-xl font-semibold">编辑战队</h1>
                </div>
            </div>
        </header>

        <!-- 编辑表单 -->
        <div class="flex-1 overflow-y-auto p-4">
            <div class="bg-white rounded-xl p-6 shadow-sm">
                <div class="flex flex-col items-center mb-6">
                    <div class="relative">
                        <img id="teamIcon" src="/static/team_icons/default_team.png" alt="战队图标" class="image-preview">
                        <div class="upload-btn-wrapper">
                            <button class="upload-btn">
                                <i class="fas fa-camera mr-2"></i>更换图标
                            </button>
                            <input type="file" id="iconInput" accept="image/*">
                        </div>
                    </div>
                </div>
                
                <form id="editTeamForm" class="space-y-4">
                    <div class="input-group">
                        <input type="text" name="name" id="teamName" placeholder=" " required>
                        <label for="teamName">战队名称</label>
                    </div>
                    <div class="input-group">
                        <input type="text" name="league" id="teamLeague" placeholder=" " required>
                        <label for="teamLeague">所属联赛</label>
                    </div>
                    <div class="input-group">
                        <input type="text" name="game" id="teamGame" placeholder=" " required>
                        <label for="teamGame">所属游戏</label>
                    </div>
                    <div class="flex justify-end space-x-3 mt-8">
                        <button type="button" onclick="goBack()" class="btn btn-secondary">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // API基础URL
        const API_BASE_URL = window.location.origin + '/api';
        let teamId = null;
        
        // 从URL获取战队ID
        function getTeamIdFromUrl() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('id');
        }
        
        // 加载战队信息
        async function loadTeamInfo() {
            teamId = getTeamIdFromUrl();
            if (!teamId) {
                alert('未找到战队ID');
                goBack();
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/teams/${teamId}`);
                if (!response.ok) {
                    throw new Error('获取战队信息失败');
                }
                
                const team = await response.json();
                
                // 填充表单
                document.getElementById('teamName').value = team.name;
                document.getElementById('teamLeague').value = team.league;
                document.getElementById('teamGame').value = team.game;
                document.getElementById('teamIcon').src = team.icon;
                
            } catch (error) {
                console.error('Error loading team info:', error);
                alert('获取战队信息失败');
            }
        }
        
        // 上传图标
        async function uploadIcon(file) {
            if (!teamId || !file) return;
            
            const formData = new FormData();
            formData.append('icon', file);
            
            try {
                const response = await fetch(`${API_BASE_URL}/teams/${teamId}/icon`, {
                    method: 'POST',
                    body: formData
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '上传图标失败');
                }
                
                const team = await response.json();
                document.getElementById('teamIcon').src = team.icon;
                alert('图标上传成功');
                
            } catch (error) {
                console.error('Error uploading icon:', error);
                alert(error.message || '上传图标失败');
            }
        }
        
        // 监听图标选择
        document.getElementById('iconInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // 预览图片
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('teamIcon').src = e.target.result;
                }
                reader.readAsDataURL(file);
                
                // 上传图片
                uploadIcon(file);
            }
        });
        
        // 处理表单提交
        document.getElementById('editTeamForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            if (!teamId) return;
            
            const formData = new FormData(e.target);
            const data = Object.fromEntries(formData.entries());
            
            try {
                const response = await fetch(`${API_BASE_URL}/teams/${teamId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });
                
                if (!response.ok) {
                    throw new Error('更新战队信息失败');
                }
                
                alert('战队信息更新成功');
                goBack();
                
            } catch (error) {
                console.error('Error updating team:', error);
                alert(error.message || '更新战队信息失败');
            }
        });
        
        // 返回上一页
        function goBack() {
            window.location.href = 'zhandui.html';
        }
        
        // 初始加载
        document.addEventListener('DOMContentLoaded', loadTeamInfo);
    </script>
</body>
</html> 